<template>
  <div>
    <div>
      <a-input-search
        v-model="keyValue"
        placeholder="模糊搜索"
        enter-button
        style="width: 180px; margin-left: 10px"
        @search="refresh"
        @input="refresh"
      />
    </div>
    <a-table class="table" :rowKey="(row) => row.id" :data-source="data" :pagination="pagination">
      <a-table-column title="主图" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <div class="thumb">
              <img v-if="row.package_type" style="width: 58px; height: 86px; margin-left: 21px" :src="row.thumb" />
              <img v-else style="width: 100px; height: 105px" :src="row.thumb" alt="" />
            </div>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="卡组标题" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <span>{{ row.card_deck_name }}</span>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="类别" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <span> {{ row.package_type ? '卡册' : '赏品' }}</span>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="创建时间" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <span> {{ row.created_at }}</span>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="用户" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <span> {{ row.name }}</span
            >id:<span>{{ row.user_id }}</span>
          </div>
        </template>
      </a-table-column>

      <a-table-column title="是否交换" width="100px">
        <template slot-scope="row">
          <div class="product-info">
            <span v-if="row.status === 0">未交换</span>
            <span v-if="row.status === 1">交换中</span>
            <span v-if="row.status === 2">交换完成</span>
            <span v-if="row.status === 3">已解除</span>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="卡组状态" width="100px">
        <template slot-scope="row">
          <div class="product-info">
            <span> {{ row.deck_status ? '已发布' : '未发布' }}</span>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="卡组描述" width="200px">
        <template slot-scope="row">
          <div class="product-info">
            <span> {{ row.deck_desc ? row.deck_desc : '暂无详情' }}</span>
          </div>
        </template>
      </a-table-column>
      <a-table-column title="操作" key="action">
        <template slot-scope="row">
          <span>
            <a href="javascript:;" @click="handleCheck(row)">查看</a>
          </span>
        </template>
      </a-table-column>
      <!-- <a-table-column title="" width="200px"></a-table-column> -->
    </a-table>
    <!-- <a-modal :visible="modalVisible" @cancel="handleCancel" title="卡组详情">
      <p>用户名称：{{ card_deck.name }}</p>
      <p>用户 ID: {{ card_deck.user_id }}</p>
      <p>卡组名称:{{ card_deck.card_deck_name }}</p>
      <p>卡组详情:{{ card_deck.deck_desc }}</p>
      <p>发布时间:{{ card_deck.updated_at }}</p>
      <div>
        <p>图片展示：</p>
        <div v-for="image in deckList" :key="image.id" style="display: inline-block">
          <img :src="image.thumb" alt="card image" style="max-width: 100px; margin-right: 10px; margin-bottom: 10px" />
        </div>
      </div>
    </a-modal> -->
    <EditSkuList ref="modal" @ok="handleOk" :deckList="deckList" @cancel="handleCancel"></EditSkuList>
  </div>
</template>
<script>
import EditSkuList from './components/modal.vue'
export default {
  components: {
    EditSkuList,
  },
  data() {
    return {
      data: [],
      modalVisible: false,
      deckList: [],
      card_deck: [],
      keyValue: '',
      pagination: {
        // 分页配置
        current: 1, // 当前页数
        pageSize: 10, // 每页条数
        total: 0, // 数据总数
        onChange: this.handlePageChange, // 切换页码时的回调函数
      },
    }
  },
  created() {
    this.getdata()
  },
  methods: {
    handlePageChange(e) {
      this.pagination.current = e
      this.getdata()
    },
    refresh() {
      this.getdata()
    },
    handleCancel() {
      this.modalVisible = false
    },
    handleCheck(e) {
      // console.log(e)
      this.$http.get(`/card/package/${e.card_deck_id}`).then((res) => {
       
       this.deckList = res.data.list
       // this.deckList = Object.entries(this.deckList);
       // console.log('this.deckList',this.deckList)
     })
     this.$refs.modal.visible = true
    },
    getdata() {
      this.$http
        .get('/card/deck', {
          params: {
            page: this.pagination.current,
            per_page: this.pagination.pageSize,
            name: this.keyValue,
          },
        })
        .then((res) => {
          // console.log(res)
          this.data = res.data.list
          this.pagination.total = res.data.item_total
          console.log(this.pagination.total)
        })
    },
    handleOk() {
      this.$refs.modal.visible = false
      this.deckList = []
      // 处理确认操作
    },
    handleCancel() {
      this.$refs.modal.visible = false
      this.deckList = []
      // 处理取消操作
    },
  },
}
</script>
<style lang="scss" scoped>

</style>
